<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
</head>

<body>

<div ng-app="hd">
    <div ng-controller="ctrl1">
        <table border="1" width="600px">
            <tr>
                <td>网站名称</td>
                <td>网址</td>
            </tr>
            <tr ng-repeat="v in data.webs">
                <td>{{v.name}}</td>
                <td>{{v.url}}</td>
            </tr>
        </table>
    </div>
    <hr>
    <div ng-controller="ctrl2">
        <table border="1" width="600px">
            <tr>
                <td>网站名称</td>
                <td>网址</td>
            </tr>
            <tr ng-repeat="v in data.webs">
                <td>{{v.name}}</td>
                <td>{{v.url}}</td>
            </tr>
        </table>
        {{web}}
        <button ng-click="flushAll()">删除所有数据</button>
    </div>


</div>

<script>
    var m = angular.module('hd', []);
    //定义服务
    m.factory('videoServer', ['$http', function ($http) {
        //需要返回一个json
        var obj = {
            //定义对象，使用对象的引用特性才能删除所有数据（如果不是使用的对象，那控制器获取数据的时候是拷贝了一份，在页面显示就删不掉）
            data: {webs: []},
            //所有数据
            all: function () {
                return $http({url: ' 1.php'}).then(function (response) {
                    obj.data.webs = response.data;
                    console.log(obj.data.webs);
                    return obj.data;
                });
            },
            //删除说有数据
            flush: function () {
                console.log(obj.data.webs);
                obj.data.webs = [];
            },
            //获取一条数据
            find: function (id) {
                return this.all().then(function (data) {
                    for (var i = 0; i < data.webs.length; i++) {
                        if (data.webs[i].id == id) {
                            return data.webs[i].name;
                        }
                    }
                });
            },

        };

        return obj;
    }]);


    m.controller('ctrl1', ['$scope', 'videoServer', function ($scope, videoServer) {
        videoServer.all().then(function (data) {
            $scope.data = data;
        });
    }]);

    m.controller('ctrl2', ['$scope', 'videoServer', function ($scope, videoServer) {

        videoServer.all().then(function (data) {
            $scope.data = data;
        });

        videoServer.find(1).then(function (data) {
            $scope.web = data;
        });

        $scope.flushAll = function () {
            videoServer.flush();
        };
        //这样调用会最先执行（所有控制器的所有方法中），与此代码的调用位置无关。
        videoServer.flush();
    }]);
</script>

</body>

</html>